<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>会员注册</title>

    <link rel="stylesheet" href="css/projectmain.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/Register.css">
    <link rel="stylesheet" href="css/card-list.css">
    <script src="./js/My97DatePicker/WdatePicker.js"></script>    

    <style>
        .content-title,.title-lable,.title-input,.content-detail{font-size:12px;}
        .card-list-conr > .content-title{border-bottom: }
    </style>
</head>
<body>
    <div class="main">
        <div class="head">
            <a href="http://www.wyzyz.org" class="logo">
                <img src="http://www.cflac.org.cn/zhiyuanzhe/image/logo.png" alt="">
            </a>
            <div class="topSearch">
                <form action="http://www.cflac.org.cn/was5/web/search" method="POST" accept-charset="UTF-8">
                    <input type="text" value="站内搜索..." class="input1">
                    <input type="image" class="btn1" src="http://www.wyzyz.org/images/topBtn.gif">
                </form>
            </div>
        </div>
        <div class="nav">
            <ul>
                <li><a href="http://www.wyzyz.org" class="aNow" style="width: 37px;">首 页</a></li>
                <li><a href="#" class="aNow">要闻资讯</a></li>
                <li><a href="#" class="aNow">精彩视频</a></li>
                <li><a href="#" class="aNow">品牌活动</a></li>
                <li><a href="#" class="aNow">各地联动</a></li>
                <li><a href="#" class="aNow">志愿者协会</a></li>
                <li><a href="#" class="aNow">名家公益</a></li>
                <li><a href="#" class="aNow">志愿之星</a></li>
                <li><a href="#" class="aNow">互动交流</a></li>
                <li><a href="#" class="aNow">资料下载</a></li>
            </ul>
        </div>


        <div class="signin-form" id="register">
            <div v-if="thisPage === 1">
                <div class="register-header">个人基本信息</div>
                <div class="register-title">账号信息</div>
                <section class="part">
                    <div class="contentl">
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>用户名</label><input class="register-normal-input" type="text" v-model="usrName"></div>
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>确认用户名</label><input class="register-normal-input" type="text" v-model="conUsrName"></div>
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>密码</label><input class="register-normal-input" type="text" v-model="usrCode"></div>
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>确认密码</label><input class="register-normal-input" type="text" v-model="conUsrCode"></div>
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>电子邮箱</label><input class="register-normal-input" type="text" v-model="email"></div>
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>确认电子邮箱</label><input class="register-normal-input" type="text" v-model="conEmail"></div>
                    </div>
                    <div class="contentr">
                        <div class="item register-item"><label  class="register-lable"><span class="is-important">*</span>邀请码</label><input class="register-normal-input" type="text" v-model="invitationCode"></div>
                    </div>
                </section>

                <div class="register-title">个人基本信息</div>
                <section class="part">
                    <div class="contentl">
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>姓名</label><input class="register-normal-input" type="text" v-model="name"></div>
                        <div class="item register-item"><label class="register-lable">艺名</label><input class="register-normal-input" type="text" v-model="stageName"></div>
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>出生日期</label><input class="register-normal-input" type="text" onClick="WdatePicker()" v-model="bornDay"></div>
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>政治面貌</label>
                            <select style="margin-left: 120px" v-model="politicalStatus1">
                                <option value="partyMember">中共党员</option>
                                <option value="proPartyMember">中共预备党员</option>
                                <option value="youthLeagueMember">共青团员</option>
                                <option value="committeMember">民革党员</option>
                                <option value="NLDleaguer">民盟盟员</option>
                                <option value="DABmember">民建会员</option>
                                <option value="DPPmember">民进会员</option>
                                <option value="migrantWorkersPartyMem">民工党党员</option>
                                <option value="publicInsParty">致公党党员</option>
                                <option value="memberSociety">九三学社社员</option>
                                <option value="taiwanDemocraticAlliance">台盟盟员</option>
                                <option value="personagesWithout">无党派民主人士</option>
                                <option value="masses">群众</option>
                            </select>
                            <select style="margin-left: 20px">
                                <option value="partyMember">中共党员</option>
                                <option value="proPartyMember">中共预备党员</option>
                                <option value="youthLeagueMember">共青团员</option>
                                <option value="committeMember">民革党员</option>
                                <option value="NLDleaguer">民盟盟员</option>
                                <option value="DABmember">民建会员</option>
                                <option value="DPPmember">民进会员</option>
                                <option value="migrantWorkersPartyMem">民工党党员</option>
                                <option value="publicInsParty">致公党党员</option>
                                <option value="memberSociety">九三学社社员</option>
                                <option value="taiwanDemocraticAlliance">台盟盟员</option>
                                <option value="personagesWithout">无党派民主人士</option>
                                <option value="masses">群众</option>
                            </select>
                        </div>                   
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>手机号</label><input class="register-normal-input" type="text" v-model="phoneNumber"></div>
                        <div class="item register-item"><label class="register-lable">传真号</label><input class="register-normal-input" type="text" v-model="faxNumber"></div>
                        <div class="item register-item"><label class="register-lable">电子邮箱</label><input class="register-normal-input" type="text" v-model="workEmail"></div>                  
                    </div>
                    <div class="contentr">
                        <div class="item register-item">
                            <label class="register-lable"><span class="is-important">*</span>性别</label>
                            <form style="margin-left: 120px;">
                                <label><input name="Sex" type="radio" checked="checked" value=1 v-model="sex">男</label>
                                <label><input name="Sex" type="radio" value=2 v-model="sex">女</label>
                            </form>
                        </div>
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>民族</label><input class="register-normal-input" type="text" v-model="nation"></div>
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>籍贯</label><input class="register-normal-input" type="text" v-model="placeOfOrigin"></div>
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>身份证号（军官证）</label><input class="register-normal-input" type="text" v-model="priId"></div>
                        <div class="item register-item"><label class="register-lable">办公室电话</label><input class="register-normal-input" type="text" v-model="workTel"></div>
                        <div class="item register-item"><label class="register-lable">微信号</label><input class="register-normal-input" type="text" v-model="weChat"></div>
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>通讯地址</label><input class="register-normal-input" type="text" v-model="address"></div>
                    </div>

                    <div class="content-part">
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>所在单位</label><input class="register-long-input" type="text" v-model="company"></div>
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>职务</label><input class="register-long-input" type="text" v-model="duties"></div>
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>主要社会职务</label><input class="register-long-input" type="text" v-model="sociatyDuties"></div>                    
                    </div>

                    <div class="contentl">
                        <div class="item register-item"><label class="register-lable">专业职称</label><input class="register-normal-input" type="text" v-model="majorDuties"></div>                    
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>毕业院校</label><input class="register-normal-input" type="text" v-model="graduatedSch"></div>
                    </div>

                    <div class="contentr">
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>学历</label><input class="register-normal-input" type="text" v-model="education"></div>                    
                        <div class="item register-item"><label class="register-lable"><span class="is-important">*</span>专业</label><input class="register-normal-input" type="text" v-model="major"></div>
                    </div>
                    
                </section>

                <div class="register-title">推荐单位或个人信息</div>
                <section class="part">
                    <div class="contentl">
                        <div class="item register-item"><label class="register-lable">推荐单位</label><input class="register-normal-input" type="text" v-model="recommandCompany"></div>                    
                        <div class="item register-item"><label class="register-lable">电话</label><input class="register-normal-input" type="text" v-model="recommandComTel"></div>
                        <div class="item register-item"><label class="register-lable">推荐单位联系人</label><input class="register-normal-input" type="text" v-model="recommandComMan"></div>
                        <div class="item register-item"><label class="register-lable">电话</label><input class="register-normal-input" type="text" v-model="recommandManTel"></div>                    
                    </div>
                    <div class="contentr">
                        <div class="item register-item"><label class="register-lable">联系人</label><input class="register-normal-input" type="text" v-model="contactMan"></div>
                        <div class="item register-item"><label class="register-lable">地址</label><input class="register-normal-input" type="text" v-model="contactComAddress"></div>
                        <div class="item register-item"><label class="register-lable">职务</label><input class="register-normal-input" type="text" v-model="contactManDuties"></div>
                        <div class="item register-item"><label class="register-lable">地址</label><input class="register-normal-input" type="text" v-model="contactManAddress"></div>                   
                    </div>
                </section>

                <div class="register-title"><span class="is-important">*</span>艺术门类</div>
                <section class="part">
                    <form id="expertise" style="color:#000;">
                        <label><input type="checkbox" value="literature" v-model="artSort"/>文学 </label>
                        <label><input type="checkbox" value="theatre" v-model="artSort"  />戏剧 </label>
                        <label><input type="checkbox" value="movie" v-model="artSort"  />电影 </label>
                        <label><input type="checkbox" value="music" v-model="artSort"  />音乐 </label>
                        <label><input type="checkbox" value="art" v-model="artSort"  />美术 </label>                    
                        <label><input type="checkbox" value="quYi" v-model="artSort"  />曲艺 </label>                    
                        <label><input type="checkbox" value="dance" v-model="artSort"  />舞蹈 </label> 
                        <label><input type="checkbox" value="folkLiterature" v-model="artSort"  />民间文艺 </label>                     
                        <label><input type="checkbox" value="photography" v-model="artSort"  />摄影 </label> 
                        <br>     
                        <label><input type="checkbox" value="calligraphy" v-model="artSort"  />书法 </label>
                        <label><input type="checkbox" value="acrobatics" v-model="artSort"  />杂技 </label>
                        <label><input type="checkbox" value="television" v-model="artSort"  />电视 </label>
                        <label><input type="checkbox" value="literaryCriticism" v-model="artSort"  />文艺评论 </label>
                        <label><input type="checkbox" value="theory" v-model="artSort"  />理论 </label>                    
                        <label><input type="checkbox" value="mediaPublicity" v-model="artSort"  />媒体宣传 </label>                    
                        <label><input type="checkbox" value="artManagement" v-model="artSort"  />艺术管理 </label>               
                        <label><input type="checkbox" value="other" v-model="artSort"  />其它 </label>                     
                    </form>
                </section>

                <div class="register-title"><span class="is-important">*</span>工作简历（艺术简历）</div>
                <div class="part">
                    <textarea name="" id="" cols="30" rows="10" placeholder="不超过300字" style="width:100%"  v-model="resume"></textarea>
                </div>

                <div class="btn-submit">
                    <button v-on:click="nextPage" style="left:435px">下一页</button>
                </div>
            </div>

            <div v-if="thisPage == 2">
                <div class="register-title"><span class="is-important">*</span>公益或志愿服务经历</div>         
                <cardlist
                :items="activeExperience"></cardlist>          


                <div class="btn-submit">
                    <button v-on:click="submitForm">申请成为中国文艺志愿者协会会员</button> <input type="checkbox" value=1 style="margin-left:650px;margin-top:20px;" v-model="agree"><span class="is-important">*</span>同意申请人承诺
                </div>

                <div class="agreement">
                    <textarea name="" id="" readonly="readonly" cols="30" rows="10">
                                                            申请人承诺
                            我自愿加入中国文艺志愿者协会，遵守协会《章程》，努力为文艺志愿服务事业作出贡献。
                    </textarea>
                </div>
            </div>
        
        </div>



        <div class="footLink">
        <h1>链接</h1>
        </div>
        <div class="pageTitle">  
            <a href="#">中国文联</a><span style="font-size: 12px;"> | </span>
            <a href="#">中国作协</a><span style="font-size: 12px;"> | </span>
            <a href="#">中国剧协</a><span style="font-size: 12px;"> | </span>
            <a href="#">中国影协</a><span style="font-size: 12px;"> | </span>
            <a href="#">中国音协</a><span style="font-size: 12px;"> | </span>
            <a href="#">中国美协</a><span style="font-size: 12px;"> | </span>
            <a href="#">中国曲协</a><span style="font-size: 12px;"> | </span>
            <a href="#">中国舞协</a><span style="font-size: 12px;"> | </span>
            <a href="#">中国民协</a><span style="font-size: 12px;"> | </span>
            <a href="#">中国摄协</a><span style="font-size: 12px;"> | </span>
            <a href="#">中国书协</a><span style="font-size: 12px;"> | </span>
            <a href="#">中国杂协</a><span style="font-size: 12px;"> | </span>
            <a href="#">中国视协</a><span style="font-size: 12px;"> | </span>
            <a href="#">中国文学艺术基金会</a><span style="font-size: 12px;"></span>
        </div>
        <div class="foot-content">
            <div class="fl">
                <img src="http://www.wyzyz.org/position/201311/W020131122395902660584.jpg" alt="" style="width: 696px;height: 140px;">
            </div>
            <div class="fr">
                <img src="http://www.wyzyz.org/position/201311/W020141017430301807582.jpg" alt="" style="width: 270px;height: 140px;">
            </div>
        </div>

        <div class="footDiv">
            <div class="div0">
                <a href="#">联系咨询</a>|
                <a href="#">投诉建议</a>|
                <a href="#">文艺论坛</a>|
                <a href="#">职能部门</a>|
                <a href="#">团体会员</a>|
                <a href="#">组织结构</a>|
            </div>
            京ICP备14001194号　京公网安备11010502025171  中国文艺志愿者网　版权所有
        </div>


    </div>


<script type="text/x-template" id="cardList-template">
    <div class="part" style="overflow:visible;margin-bottom:100px;">
        <div class="card-list-wrapper" style="position:relative;height:340px;margin-bottom:20px;" v-for="item in items">
            <div class="card-list-conl" style="height:320px;">
                <div class="card-list-img" style="height:240px;">
                    <img :src="item.currentImg">
                    <input type="text" v-model="item.inputName1" style="width:185px;height:25px;border:1px solid #bdbdbd;margin-top:10px;padding-left:10px;" placeholder="请输入照片名称1...">
                    <input type="text" v-model="item.inputName2" style="width:185px;height:25px;border:1px solid #bdbdbd;margin-top:10px;padding-left:10px;" placeholder="请输入照片名称2...">
                    <input type="text" v-model="item.inputName3" style="width:185px;height:25px;border:1px solid #bdbdbd;margin-top:10px;padding-left:10px;" placeholder="请输入照片名称3...">                                                       
                </div>
                <ul class="card-img-list">

                    <div class="btn-wrap">
                        <img v-bind:src="item.img1">
                        <input v-on:change="updateValue($event.target,item.id,1)" @mouseenter="whenMouseHover(item.id,1)" class="file" text="上传图片" type="file">
                    </div>

                    <div class="btn-wrap">
                        <img v-bind:src="item.img2">
                        <input v-on:change="updateValue($event.target,item.id,2)" @mouseenter="whenMouseHover(item.id,2)" class="file" text="上传图片" type="file">
                    </div>

                    <div class="btn-wrap">
                        <img v-bind:src="item.img3">
                        <input v-on:change="updateValue($event.target,item.id,3)" @mouseenter="whenMouseHover(item.id,3)" class="file" text="上传图片" type="file">
                    </div>
                </ul>
            </div>
            <div class="card-list-conr" style="height:330px;">
                <div class="content-title" style="margin-bottom:10px;height:50px;">
                    <label class="title-lable">活动标题</label><input type="text" placeholder="请输入活动标题..." v-model="item.activeTitle" class="title-input">
                </div>
                <div class="content-title" style="border-bottom:none;">
                    <label class="title-lable">活动地点</label><input type="text" placeholder="请输入活动地点." v-model="item.activePlace" class="title-input" style="width:100px;">
                    <label class="title-lable" style="margin-left:210px;">活动时间</label><input type="text" placeholder="请输入活动时间" v-model="item.activeTime" class="title-input" style="width:100px;">
                </div>
                <div class="content-con" style="margin-top:20px;">
                    <div class="content-title" style="margin-top:10px;">活动经历：</div>
                    <div class="content-actcontent">
                        <textarea name="" id="" cols="30" rows="10" placeholder="请输入您的活动经历..." v-model="item.activeEx" style="width:600px;height:150px;border-radius:3px;"></textarea>
                    </div>
                </div>
            </div>
            <div style="width:50px;height:50px;border:1px solid #bdbdbd;border-radius:50%;position:absolute;bottom:-70px;left:463px;" @click="whenAddClick"><img style="width:50px;height:50px;" src="./img/add.png" alt=""></div>
        </div>
        <!--card-list-finish--> 
    </div>
</script>

<script src="https://unpkg.com/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('cardlist',{
    template:'#cardList-template',
    props:['items'],
    methods:{
        whenAddClick:function(){
            var add = {id:register.activeExperience.length+1,currentImg:'./img/face1.png',img1:'./img/face1.png',img2:'./img/face2.png',img3:'./img/face3.png',inputImgName1:'',inputImgName2:'',inputImgName3:'',activeTitle:'',activePlace:'',activeTime:'',activeEx:'',seen1:true,seen2:false,seen3:false};
            console.log(add);
            register.activeExperience.push(add);
        },
        whenMouseHover:function(id,num){
            if(num === 1) register.activeExperience[id-1].currentImg = register.activeExperience[id-1].img1;
            else if(num === 2) register.activeExperience[id-1].currentImg = register.activeExperience[id-1].img2;
            else if(num === 3) register.activeExperience[id-1].currentImg = register.activeExperience[id-1].img3;
        },
        updateValue: function(elem,id,num) {
            var file  = elem.files[0];
            var reader  = new FileReader();

            reader.addEventListener("load", function () {
                register.activeExperience[id-1].currentImg = reader.result;
                if(num === 1) register.activeExperience[id-1].img1 = reader.result;
                else if(num === 2) register.activeExperience[id-1].img2 = reader.result;                
                else if(num === 3) register.activeExperience[id-1].img3 = reader.result;                
            }, false);

            if (file) {
                console.log("图片加载..");
                reader.readAsDataURL(file);
            }
        },
    }
})
</script>

<script>
var register = new Vue({
    el: '#register',
    data:{
        usrName:'', 
        conUsrName:'',
        usrCode:'',
        conUsrCode:'',
        email:'',
        //确认邮箱
        conEmail:'',
        invitationCode:'',
        //用户账户

        name:'',
        stageName:'',
        bornDay:'',
        politicalStatus1:null,
    /*    politicalStatus2:'',*/
        phoneNumber:'',
        faxNumber:'',
        workEmail:'',
        sex:'',
        nation:'',
        placeOfOrigin:'',
        priId:'',
        workTel:'',
        weChat:'',
        address:'',
        //个人基本信息

        company:'',
        duties:'',
        sociatyDuties:'',
        majorDuties:'',
        graduatedSch:'',
        education:'',
        major:'',
        //个人社会信息

        recommandCompany:'',
        recommandComTel:'',
        recommandComMan:'',
        recommandManTel:'',

        contactMan:'',
        contactComAddress:'',
        contactManDuties:'',
        contactManAddress:'',

        //推荐信息
        artSort:[],

        resume:'',

        //活动经历   
        activeExperience:[
            {id:1,currentImg:'./img/face1.png',img1:'./img/face1.png',img2:'./img/face2.png',img3:'./img/face3.png',inputImgName1:'',inputImgName2:'',inputImgName3:'',activeTitle:'',activePlace:'',activeTime:'',activeEx:'',seen1:true,seen2:false,seen3:false},
            
        ],


        //同意协议
        agree:1,
        thisPage:1,
        
    },

    // watch:{
    //     artSort:function(val){
    //         console.log(this.artSort);
    //     }
    // },


    methods:{

        submitForm:function(){
            if(this.agree !== 1){
                alert("请同意协议！");
                return;
            }
            
            axios.post('/api/register',{
                "username": this.usrName, //用户名
                "reusername":this.conUsrName,
                "eamil": this.email,
                "reemail": this.conEmail,
                "password": this.usrCode,
                "repassword": this.conUsrCode,
                "email":this.email,
                "reemail": this.conEmail,
                "code": this.invitationCode,
                "user_num": this.invitationCode,
                //账号信息
                "name": this.name, //姓名
                "stage_name": this.stage_name, //艺名
                "sex": this.sex, //性别
                "nation": this.nation, //民族
                "birth": this.bornDay, //出生日期
                "native_place": this.placeOfOrigin, //籍贯
                "politics_status":this.politicalStatus1, //政治面貌
                //政治面貌2
                "card": this.priId, //身份证
                "phone": this.workTel, //手机
                "fax": this.faxNumber, //传真
                //照片
                "wechat": this.weChat,
                // "email": this.workEmail,
                "address": this.address, //地址
                "organisation": this.company,//公司
                "duty": this.duties,
                "social_title": this.sociatyDuties, //社会职称
                "Professionail_title": this.majorDuties, //职位
                "education": this.education, //学历
                "school": this.graduatedSch, //毕业学校
                "specialty": this.major, //专业
                "recommend_company": this.recommandCompany, 
                "cantact": this.recommandComMan,
                "contact_phone": this.recommandManTel,
                //推荐单位地址
                "referrer": this.contactMan,
                "referrer_duty": this.contactManDuties,
                "referrer_address": this.contactComAddress,


                "literary_specialty": this.artSort,

                "resume": this.resume,

                "activeExperience": this.activeExperience,

            }).then(function(response){
                console.log(response)
            }).catch(function(error) {
                console.log(error);
            });
        },

        nextPage:function(){
            if(this.thisPage === 1){
                this.thisPage = 2;
            }
        }
    }
})


</script>

</body>
</html>